<template>
	<div id="index">
		<form action="/">
		  <van-search
			v-model="value"
			show-action
			placeholder="请输入搜索关键词"
			@search="onSearch"
			@cancel="onCancel"
		  >
		  <template #action>搜索</template>
		   </van-search>
		</form>
			<van-sidebar v-model="activeKey" @change="OnClick" class="box">
			    <van-sidebar-item v-for="(item,index) in About " :key="index" :title="item.name" :src="item.img" />
			</van-sidebar>
			<div id="cont"  style="height: 650px;">
				<van-grid :column-num="3" style="height: 600px;overflow: auto;">
					<van-grid-item v-for="(item,index) in bout">
						<img :src="item.img" class="minimg">
						{{item.content}}
					</van-grid-item>
				</van-grid>
			</div>
	</div>
</template>

<script>
	import axios from "axios";
	import { Notify } from 'vant';
	export default {
	  data() {
	    return {
			value:'',
	      activeKey: 0,
		  About:[],
		  bout:[],
		    active: 2,
	    };
	  },
	    methods: {
	      onSearch(val) {
	        Toast(val);
	      },
	      onCancel() {
	        Toast('搜索');
	      },
		  onChange(index) {
		    Notify({ type: 'primary', message: index });
		  },
		  OnClick(index) {
		    //获取一级json下面的二级json
		    this.bout = this.About[index].cname;
		   },
	    },
		created() {
		    // 遍历我们自己写的数据
		    // axios.get("/api/xjr/flowers").then((res) => {
		    //   this.About = this.list = res.data.data.users;
		    //         //默认设置展示第一个
		    //         this.bout = this.About[0].cname;
		    // });
			axios({
			  method: 'get',
			  url: '/api/xjr/flower',
			})
			  .then(res=>{
				   this.About = this.list = res.data.data[0].data.users;
				   // console.log(this.About)
				   this.bout = this.About[0].cname;
			  });
		  }
	};
</script>

<style  scoped>
.box{
  display: flex;
  float: left;
}
.box img{
	display: block;
	width: 10%;
	height: 10%;
}
.bos{
  width: 50%;
}
.minimg{
	width: 100%;
	height: 50%;
}
</style>

